<template>
  <div class="editor-tools-bar">
    <span class="tool-bar-button">
      <svg aria-hidden="true">
        <use xlink:href="#dv-undo"></use>
      </svg>
    </span>
    <span class="tool-bar-button">
      <svg aria-hidden="true">
        <use xlink:href="#dv-redo"></use>
      </svg>
    </span>
    <span class="tool-bar-button">
      <svg aria-hidden="true" @click="removeComponent()">
        <use xlink:href="#dv-delete"></use>
      </svg>
    </span>
    <span class="tool-bar-button">
      <svg aria-hidden="true" @click="changeComponentLock()">
        <use
          v-bind:xlink:href="activeIsLocked ? '#dv-unlock' : '#dv-lock'"
        ></use>
      </svg>
    </span>
    <span class="tool-bar-button">
      <svg aria-hidden="true" @click="swapComponent('lowest')">
        <use xlink:href="#dv-zhidi"></use>
      </svg>
    </span>
    <span class="tool-bar-button">
      <svg aria-hidden="true" @click="swapComponent('highest')">
        <use xlink:href="#dv-zhiding"></use>
      </svg>
    </span>
    <span class="tool-bar-button" @click="swapComponent('up')">
      <svg aria-hidden="true">
        <use xlink:href="#dv-shangyi"></use>
      </svg>
    </span>
    <span class="tool-bar-button" @click="swapComponent('down')">
      <svg aria-hidden="true">
        <use xlink:href="#dv-xiayi"></use>
      </svg>
    </span>
    <!-- <el-input-number
      class="canvas-scale-num"
      v-model="canvasScale"
      :step="5"
      :min="20"
      :max="150"
      controls-position="right"
      @change="updateCanvasScale"
    /> -->
    <span class="tool-bar-button with-text" @click="previewConfig"> 预览 </span>
    <span class="tool-bar-button with-text" @click="changeOverviewPadVisible">
      图层
    </span>
    <!-- 预览弹出层 -->
    <el-dialog
      :visible.sync="previewModelVisible"
      title="预览"
      width="80vw"
      destroy-on-close
      append-to-body
    >
      <pre class="preview-code-style">
        <code>
          {{ componentsConfig }}
        </code>
      </pre>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      //预览弹出层
      previewModelVisible:false,
      componentsConfig:''
    }
  },
  created(){
    console.log("canvasScale",this.canvasScale);
    console.log("activeIsLocked",this.activeIsLocked);
  },
  computed: {
    canvasScale(){
      return this.$store.state.imageDragMoudules.canvas.scale * 100;
    },
    activeIsLocked(){
      const acComponent = this.$store.state.imageDragMoudules.acComponent;
      console.log("acCom:",acComponent)
      return acComponent != null ? acComponent.isLocked : false;
    }
  },
  methods: {
    //移除
    removeComponent(){
      this.$store.commit('removeComponent');
    },
    //锁定解锁
    changeComponentLock(){
      let data = {
        newState: !this.activeIsLocked,
        key: 'isLocked',
      }
      this.$store.commit('updateComponent',data)
    },
    //图层移动
    swapComponent(type){
      this.$store.commit('swapComponent', type);
    },
    //预览
    previewConfig(){
      const components = this.$store.state.imageDragMoudules.components;
      console.log("components",components);
      this.componentsConfig = JSON.stringify(components, null, 2);
      console.log("toolBar-componentsConfig",this.componentsConfig);
      this.previewModelVisible = true;
      console.log("previewModelVisible",this.previewModelVisible);
    },
    //图层
    changeOverviewPadVisible(){
      this.$store.commit('changeOverviewPadVisible');
    },
    // updateCanvasScale(){
    //   this.$store.commit('updateCanvas', { scale: canvasScale.value / 100 });
    // }
  }
}
</script>

<style lang="scss" scoped>
.editor-tools-bar {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 600px;
  background: rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .tool-bar-button {
    width: 24px;
    height: 24px;
    color: #e4e4e4;
    &:hover {
      cursor: pointer;
    }
    &.with-text {
      font-size: 12px;
      line-height: 24px;
      color: #666666;
      &:hover {
        color: #aaaaaa;
      }
    }
  }
  svg {
    width: 100%;
    height: 100%;
    fill: #666666;
    &:hover {
      fill: #aaaaaa;
      cursor: pointer;
    }
  }
}
.preview-code-style {
  width: 100%;
  height: 100%;
  max-height: 72vh;
  overflow-y: auto;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
}
</style>
